<template>
  <div class="login">
    <div class="login-form">
      <h3 class="title">美高梅艺术博物馆<br>官网管理后台</h3>
      <div class="name"></div>

      <div class="item">
        <el-select v-model="type" placeholder="请选择" style="width: 140px; margin-right: 16px;">
          <el-option
            v-for="(item, index) in phoneList"
            :key="index"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-input
          v-model="phone"
          type="text"
          auto-complete="off"
          placeholder="请输入手机号"
        >
        </el-input>
      </div>
      <div class="name"></div>
      <div class="item">
        <el-input
          v-model="code"
          auto-complete="off"
          placeholder="请输入验证码"
          style="width: 63%"
          @keyup.enter.native="handleLogin"
        >
        </el-input>
        <div class="login-code" :style="flag ? 'background-color:#ccc;' : ''" @click="getCode">
          {{flag ? time+'s后重发' : '获取验证码'}}
        </div>
      </div>
        <el-button
          :loading="loading"
          size="medium"
          type="primary"
          style="width:100%; height: 50px; margin-top: 30px;"
          @click.native.prevent="handleLogin"
        >
          <span v-if="!loading">登 录</span>
          <span v-else>登 录 中...</span>
        </el-button>
        <div style="float: right;" v-if="register">
          <router-link class="link-type" :to="'/register'">立即注册</router-link>
        </div>
    </div>
    <img style="width: 896px; height: 500px;" :src="pic" />

    <!--  底部  -->
<!--     <div class="el-login-footer">
      <span>Copyright © 2023-2024 chengyuezhika@163.com All Rights Reserved.</span>
    </div> -->
  </div>
</template>

<script>
import { getPhone, getPhoneCode } from "@/api/login";
import Cookies from "js-cookie";
import { encrypt, decrypt } from '@/utils/jsencrypt'

export default {
  name: "Login",
  data() {
    return {
      pic: require('@/assets/images/login-img.jpg'),
      codeUrl: "",
      loginForm: {
        username: "admin",
        password: "admin123",
        rememberMe: false,
        code: "",
        uuid: ""
      },
      loading: false,
      // 验证码开关
      captchaEnabled: true,
      // 注册开关
      register: false,
      redirect: undefined,
      phoneList: [],
      type: '+86',
      phone: '',
      code: '',
      authenticationTokenId: '',
      flag: false,
      time: 60
    };
  },
  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect;
      },
      immediate: true
    }
  },
  created() {
    this.getPhone();
    //this.getCode();
    //this.getCookie();
  },
  methods: {
    getCode(){
      if(!this.phone){
        this.$message.error('请输入手机号码')
        return false
      }
      getPhoneCode({
        authenticationTokenId: '',
        client: 'MGM_HOME_ADMIN_WEB',
        content: this.phone,
        dialCode: this.type,
        system: 'MGM_HOME_ADMIN'
      }).then(res => {
        console.log(res)
        if(res.code=='00000'){
          this.$message.success("验证码发送成功");
          this.flag = true;
          this.getCodeTimer();
          this.authenticationTokenId = res.data.authenticationTokenId;
        }
        else{
          this.$message.error(res.msg)
        }

      });      
    },
    getCodeTimer(){
      let timer = setInterval(()=>{
        this.time--;
        if(this.time==0){
          clearInterval(timer);
          this.time = 60;
          this.flag = false;
        }
      }, 1000)
    },
    getPhone() {
      getPhone().then(res => {
        console.log(res)
        let options = res.data || [];
        let arr = [];
        options.forEach(item=>{
          item.list.forEach(child=>{
            arr.push({
              //label: child.phoneCode + '  ' +child.nameZHCN,
              label: child.phoneCode,
              value: child.phoneCode
            })
          })
        })
        this.phoneList = arr;
      });
    },
    getCookie() {
      const username = Cookies.get("username");
      const password = Cookies.get("password");
      const rememberMe = Cookies.get('rememberMe')
      this.loginForm = {
        username: username === undefined ? this.loginForm.username : username,
        password: password === undefined ? this.loginForm.password : decrypt(password),
        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
      };
    },
    handleLogin() {
      if(!this.phone){
        this.$message.error('请输入手机号码')
        return false
      }
      if(!this.code){
        this.$message.error('请输入验证码')
        return false
      }
          this.loading = true;

          this.$store.dispatch("Login", {
            authenticationTokenId: this.authenticationTokenId,
            client: 'MGM_HOME_ADMIN_WEB',
            code: this.code,
            nickname: this.phone,
            //phoneContent: this.phone,
            //dialCode: this.type,
            system: 'MGM_HOME_ADMIN'
          }).then(() => {
            this.$router.push({ path: this.redirect || "/" }).catch(()=>{});
          }).catch(() => {
            this.loading = false;
            // if (this.captchaEnabled) {
            //   this.getCode();
            // }
          });

    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss">
.login {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  background-image: url("../assets/images/login-background.jpg");
  background-size: cover;
}
.title {
  margin: 0px auto 30px auto;
  text-align: left;
  color: #594233; font-size: 40px; font-weight: 600;
}

.login-form {
  border-radius: 6px;
  width: 600px;
  padding: 25px 25px 5px 25px; margin: 0 0 0 200px;
  .name{
    font-size: 16px; line-height: 50px; font-weight: 600; height: 24px;
  }
  .item{
    display: flex; justify-content: space-between; align-items: center;
  }
  .el-input {
    height: 50px; background-color: transparent;
    input {
      height: 50px; font-size: 18px; background-color: #FFF8F3; border: 1px solid #3B2000;
    }
  }
  .input-icon {
    height: 39px;
    width: 14px;
    margin-left: 2px;
  }
}
.login-tip {
  font-size: 13px;
  text-align: center;
  color: #bfbfbf;
}
.login-code {
  width: 160px;
  height: 50px;
  background-color: #3B2000; line-height: 50px; text-align: center; color: #fff; border-radius: 5px; cursor: pointer;
  img {
    cursor: pointer;
    vertical-align: middle;
    height: 50px;
  }
}
.el-login-footer {
  height: 40px;
  line-height: 40px;
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
  color: #fff;
  font-family: Arial;
  font-size: 12px;
  letter-spacing: 1px;
}
.login-code-img {
  height: 38px;
}
</style>
